import React, { useEffect } from "react";
import { NavigateFunction } from "react-router-dom";
import { useNavigate } from "react-router-dom";
import { useAppDispatch, useAppSelector } from "../../app/hooks";
import { fetchList } from "./homeSlice";
import "./style.scss";
const Index: React.FC = () => {
  const list = useAppSelector((state) => state.home.list);
  const error = useAppSelector((state) => state.home.error);
  const loading = useAppSelector((state) => state.home.loading);
  const navigate = useNavigate();
  const dispatch = useAppDispatch();

  useEffect(() => {
    dispatch(fetchList());
  }, []);

  if (loading) {
    return <div>数据请求中...</div>;
  }

  if (error) {
    return <div>请求失败 {error}</div>;
  }

  return (
    <div>
      {list.map((v) => {
        return (
          <dl
            className="home-item"
            key={v.id}
            onClick={() =>
              navigate("/detail/" + v.id, {
                state: v,
              })
            }
          >
            <dt>
              <img src={v.url} alt="" />
            </dt>
            <dd>
              <h3>{v.title}</h3>
              <p>{v.desc}</p>
              <div>
                <span>￥：{v.price}</span>
              </div>
            </dd>
          </dl>
        );
      })}
    </div>
  );
};

export default Index;
